<template>

    <el-container class="reportPropEditRoot">

        <el-header>属性编辑</el-header>
        <el-main style="flex:1">

            <el-collapse v-model="activeNames">

                <el-collapse-item v-for="(item,index) in styleOptions" :name="index" :title="item.name">


                    <PropesEditComponent v-model="styleOptions[index]"></PropesEditComponent>


                </el-collapse-item>
            </el-collapse>


        </el-main>

        <el-footer>
            <el-button type="primary" @click="submit">保存</el-button>
        </el-footer>
    </el-container>

</template>

<script>

    import PropesEditComponent from './PropesEditComponent';
    import eventBus from '@/eventBus.js';

    export default {


        data() {

            return {
                styleOptions: [],
                activeNames: []
            };
        },
        components:{

            PropesEditComponent
        },

        mounted() {

            eventBus.$on("reportStyleLoaded", (style) => {


                this.styleOptions = JSON.parse(style);

            });

        },
        methods: {

            apply() {
                eventBus.$emit("refreshReportStyle", this.styleOptions);
            },
            submit() {
                eventBus.$emit("persistentReportStyle", this.styleOptions);
            }

        },
        beforeDestroy(){

            eventBus.$off("reportStyleLoaded");

        },
        watch: {
            styleOptions: {

                handler() {
                    this.apply();
                },

                deep: true
            }
        }


    }
</script>

<style scoped>

    .reportPropEditRoot {

        height: 100%;
        display: flex;
        flex-direction: column;
    }

</style>